<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" class="form" :inline="true" size="mini">
        <el-form-item label="店铺编号/名称:" class="name">
          <el-input
            v-model.number="input"
            @change="getShareUser()"
            clearable
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="行业:">
          <el-col :span="24">
            <el-select v-model="form.industry_gte" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="'行业' + item.industry"
                :value="item.industry"
              >
              </el-option>
            </el-select>
            <span>-</span>
            <el-select v-model="form.industry_lte" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="'行业' + item.industry"
                :value="item.industry"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <div class="buttonL">
          <el-button type="primary" size="small" @click="query">查询</el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </el-card>
    <el-card>
      <el-table border :data="tableData" row-key="id">
        <el-table-column
          sortable
          label="店铺编号"
          prop="id"
          align="center"
        />
        <el-table-column sortable label="店铺名称" prop="name" align="center" />
        <el-table-column sortable label="店铺行业" align="center">
          <template slot-scope="scope">
            <span>行业{{ scope.row.industry }}</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="店铺地址"
          prop="address"
          align="center"
        />
        <el-table-column
          sortable
          label="联系电话"
          prop="mobile"
          align="center"
        />
        <el-table-column
          sortable
          label="推广人ID"
          prop="Promoter"
          align="center"
        />
        <el-table-column
          sortable
          label="权益级别"
          prop="Equity"
          align="center"
        />
        <el-table-column sortable label="销售额" prop="money" align="center" />
        <el-table-column align="center" label="操作" width="300">
          <el-button type="primary" size="mini">详情</el-button>
          <el-button type="primary" size="mini">查看商品</el-button>
          <el-button type="primary" size="mini">经营分析</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.page"
        :page-size="page.size"
        :page-sizes="[2, 3, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="changePage"
        @size-change="changeSize"
      />
    </el-card>
  </div>
</template>

<script>
import { getShareUser, searchShareUser } from '@/api/sharePBD.js'
import { queryFn } from '@/utils'
export default {
  data () {
    return {
      // 表格数据
      tableData: [],
      // 翻页
      currentPage: 1,
      page: {
        page: 1,
        size: 10,
        total: 6
      },
      input: null,
      // 查询数据
      form: {
        industry_gte: null,
        industry_lte: null
      }
    }
  },
  methods: {
    // 搜索功能
    async query () {
      const obj = queryFn(this.form)
      // console.log(obj)
      if (typeof this.input === 'number') {
        obj.id = this.input
        // console.log(obj)
      } else if (typeof this.input === 'string') {
        obj.name = this.input
        // console.log(obj)
      }
      const { data } = await searchShareUser(obj)
      console.log(data)
      this.tableData = data
      this.page.total = data.length
      // this.changeSize(this.page.size)
    },
    // 重置表单
    resetForm () {
      this.input = null
      this.form.industry_gte = null
      this.form.industry_lte = null
      this.getShareUser()
    },
    // 翻页
    changePage (newPage) {
      this.page.page = newPage
      const obj = {
        _page: this.page.page,
        _limit: this.page.size
      }
      this.getShareUser(obj)
    },
    // 变换页面条数
    changeSize (newSize) {
      this.page.size = newSize
      const obj = {
        _limit: this.page.size
      }
      this.getShareUser(obj)
    },
    // 获取店铺信息
    async getShareUser (obj) {
      const { data } = await getShareUser(obj)
      this.tableData = data
    }
  },
  created () {
    this.getShareUser()
  }
}
</script>

<style lang="less" scoped>
.form {
  box-sizing: border-box;
}
.el-row {
  padding-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.buttonL {
  padding-left: 30px;
  display: inline-block;
  margin-left: 30px;
}
</style>
